<template>
  <view
    class="viewport"
    @touchcancel.stop="touchcancel"
    @touchmove.stop="touchmove"
    @touchend.stop="touchend"
    @touchstart.stop="touchstart"
    @scroll="onScroll"
  >
    <!-- 这个是视图，用于滚动 ，动态宽度，组成部分：左侧+中间部分+右侧-->
    <view
      class="viewport-swiper"
      :style="`
      width: ${viewportWidth}px;
      transform:translateX(${-(navLeft + x)}px)
`"
    >
      <view class="nav-left" :style="`width: ${navLeft}px`"></view>

      <view
        class="viewport-swiper-item"
        v-for="item in tabBar"
        :key="item.id"
        :style="`background-color: ${item.color} `"
      >
        {{ item.name }}
      </view>

      <view class="nav-right" :style="`width: ${navRight}px`"></view>
    </view>
  </view>

  <view class="tab-bar">
    <view class="tab-item" v-for="item in tabBar" :key="item.id">{{ item.name }}</view>
  </view>
</template>

<script lang="ts" setup>
import { testTxt, testColor } from '@/utils/my-mock'
// 模拟数据
const tabBar = ref([])
tabBar.value = Array.from({ length: 5 }).map((v, i) => ({
  id: i,
  name: testTxt(2),
  color: testColor(),
}))

// 视图的事件

const windowWidth = ref(uni.getSystemInfoSync().windowWidth) // 获取屏幕的宽度
const navLeft = computed(() => windowWidth.value / 1.5) // 左侧抽屉的宽度
const navRight = computed(() => windowWidth.value / 1.5) // 右侧抽屉的宽度
const viewportWidth = computed(
  // 视图容器的宽度
  () => navLeft.value + tabBar.value.length * windowWidth.value + navRight.value,
)
const bjl = computed(() => -navLeft.value) //用于判断是滑到左侧边界
const bjr = computed(() => viewportWidth.value - navRight.value - windowWidth.value) //用于判断是滑到右侧边界
const x = ref(0) // 屏幕开始移动的距离
const stratX = ref<number>() //记录开始触摸的位置，开始点-结束点=移动距离
const screenDist = computed(() => windowWidth.value / 4) //滑到到一定距离切屏
const original = ref<number>() //最初开始点击位置，用于这段移动距离
const touchTime = ref() //触摸时间
const current = ref(0)
console.log('screenDist:', screenDist.value)

function onScroll(e: Event) {
  console.log('y:', e)
}
// 触摸开始
function touchstart(e: TouchEvent) {
  const { clientX } = e.touches[0]
  stratX.value = clientX
  original.value = clientX
  touchTime.value = +Date.now()
}
// 边界距离禁止滑动
function moveDisable(moveX: number) {
  let flag = false
  if (moveX <= 0 && x.value <= bjl.value) {
    x.value = -navLeft.value
    flag = true
  }
  if (moveX >= 0 && x.value >= bjr.value) {
    x.value = bjr.value
    flag = true
  }
  return flag
}
// 触摸移动
function touchmove(e: TouchEvent) {
  const { clientX } = e.touches[0]
  const moveX = -(clientX - stratX.value) // 计算本次移动距离
  if (moveDisable(moveX)) return console.log('禁止滑动')
  x.value += moveX // 更新位置
  stratX.value = clientX // 更新起始位置
}
function touchend(e: TouchEvent) {
  const { clientX } = e.changedTouches[0]
  const end = clientX - original.value
  const flag = moveDisable(end)
  if (flag) return console.log('禁止滑动')
  if (+Date.now() - touchTime.value > 300) {
    if (Math.abs(end) < screenDist.value) {
     return x.value += end
    }
  }

  // 正屏幕移动
  if (end < 0) {
    if (current.value < 0) {
      //左侧侧抽屉回退
      current.value=0
      return (x.value = 0)
    }
    if (current.value >= tabBar.value.length - 1) {
      // 右侧抽屉
      x.value = bjr.value
      return (current.value = tabBar.value.length - 1)
    }
    x.value += windowWidth.value + end
    current.value++
    console.log('前进当前在', current.value)
  } else {
    console.log('反',current.value)
    if (current.value >= tabBar.value.length - 1) {
      //右侧抽屉回退
      current.value--
      return (x.value = (current.value + 1) * windowWidth.value)
    }
    if (current.value < 0) {
      // 左侧抽屉
      console.log('富平')
      x.value = bjl.value
      return (current.value = -1)
    }
    current.value--
    return (x.value = (current.value + 1) * windowWidth.value)
  }

  console.log('移动的距离：', end)
}
function touchcancel(e: TouchEvent) {
  console.log('touchcancel：触摸被中断', e.touches[0])
}
</script>

<style scoped lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100vw;
  height: 44px;
  line-height: 44px;
  background-color: #fff;

  .tab-item {
    flex: 1;
    text-align: center;
    border: 1px solid #000;
  }
}

.viewport {
  overflow: hidden;

  .viewport-swiper {
    display: flex;
    background-color: rgb(85, 85, 85);

    .viewport-swiper-item {
      width: 100vw;
      height: 100vh;
    }
  }
}
</style>
